import React, { Component } from 'react';
import Axios from '../../utils/request';
import styles from './DeviceList.module.scss';
import InfiniteScroll from 'react-infinite-scroller';
import { Scrollbars } from 'react-custom-scrollbars';

class DeviceList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			devicelist: [], //设备列表
			devicelist: [], //寺庙列表
			hasMore: true, //是否加载更多
			total: 1, //数据总数
			pageNum: 1, //显示页数
			pageSize: 10 //每页显示条数
		};
	}
	componentDidMount() {
		// console.log(this.props.location.state);
		this.initData();
	}
	// 获取下一页信息
	getMore = () => {
		if (this.state.total === this.state.devicelist.length) {
			return;
		}
		let { pageNum } = this.state;
		this.setState(
			{
				hasMore: false,
				pageNum: pageNum + 1
			},
			() => {
				this.initData();
			}
		);
	};
	//请求设备列表
	initData = () => {
		const { pageNum, pageSize, devicelist } = this.state;
		Axios({
			method: 'post',
			url: '/device/geiDeviceTempleAll',
			data: {
				pageIndex: pageNum,
				pageSize: pageSize,
				templeId: this.props.location.state.templeId
			}
		}).then((res) => {
			console.log(res.data.data.list);
			this.setState({
				devicelist: devicelist.concat(res.data.data.list),
				hasMore: res.data.data.hasNextPage,
				total: res.data.data.total
			});
		});
	};
	//去点灯
	handleLamp = (IMEIID, deviceLevel) => {
		// console.log(IMEIID, deviceLevel);
		let longUrl = '';
		if (deviceLevel === 3 || deviceLevel == 4) {
			longUrl = 'http://app.zjbbkj.com/?IMEIID=' + IMEIID;
		} else if (deviceLevel == 1) {
			longUrl = 'http://app.zjbbkj.com/?IMEIID=' + IMEIID + '&portNumber=1' + '&deviceType=' + deviceLevel;
		}
		window.location.href = longUrl;
	};
	render() {
		const SIGNAL_LIST = [ 1, 2, 3, 4, 5 ];
		const { devicelist, hasMore, total } = this.state;
		return (
			<div className={styles.devicelist}>
				<Scrollbars id="list-scrollbars" style={{ height: 'calc(100vh)' }} autoHide>
					<InfiniteScroll
						initialLoad={false}
						pageStart={0}
						loadMore={this.getMore}
						hasMore={hasMore}
						useWindow={false}
					>
						<ul>
							{devicelist.map((items, indexs) => {
								return (
									<li className={styles.lists} key={items + indexs}>
										<div className={styles.boxleft}>
											<p className={styles.sName}>名称：{items.deviceName}</p>
											<p className={styles.sContent}>终端号：{items.deviceIccid}</p>
											<p className={styles.sStatus}>
												状态：{items.deviceStatus === '1' ? '可用' : '不可用'}
											</p>
										</div>
										<div className={styles.boxright}>
											<ul className={styles.sSignal}>
												{SIGNAL_LIST.map((item, index) => {
													return (
														<li
															key={item + index}
															style={
																items.deviceSignal >= 26 && index <= 5 ? (
																	{ background: '#333' }
																) : items.deviceSignal >= 21 && index <= 4 ? (
																	{ background: '#333' }
																) : items.deviceSignal >= 17 && index <= 3 ? (
																	{ background: '#333' }
																) : items.deviceSignal >= 13 && index <= 2 ? (
																	{ background: '#333' }
																) : items.deviceSignal >= 6 && index <= 1 ? (
																	{ background: '#333' }
																) : (
																	{ background: '#ccc' }
																)
															}
														/>
													);
												})}
											</ul>
											<p
												className={styles.sButton}
												onClick={() => this.handleLamp(items.deviceImei, items.deviceLevel)}
											>
												去点灯
											</p>
										</div>
									</li>
								);
							})}
						</ul>
						{total === devicelist.length ? (
							<div style={{ textAlign: 'center', lineHeight: '0.2rem' }}>到底了！</div>
						) : (
							''
						)}
					</InfiniteScroll>
				</Scrollbars>
			</div>
		);
	}
}

export default DeviceList;
